<style scoped>
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .rj-cell.note{
    width: 100%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-panel {
    background: #eee;
  }
  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }
  .weui-panel {
    margin-top: 0;
    text-align: left;
  }
  .tit label, .tit span {
    font-size: 16px;
  }
  .tit label {
    padding-right: 5px;
  }
  .weui-panel.weui-panel_access {
    padding-bottom: 10px;
  }
  .weui-panel__bd:not(.base) {
    width: 98%;
    padding: 0 1% 2px 1%;
  }
  .rj-cont-tit:not(.base) {
    border-radius: 5px;
  }
</style>
<template>
  <div class="viewplan">
    <div style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      生产计划详情
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__bd base">
        <div class="weui-form-preview billitem rj-cont-tit base">
          <div class="rj-cell">
            <label>编号：</label>
            <span>{{plan.code}}</span>
          </div>
          <div class="rj-cell">
            <label>名称：</label>
            <span>{{plan.name}}</span>
          </div>
          <div class="rj-cell">
            <label>库房：</label>
            <span>{{plan.strname}}</span>
          </div>
          <div class="rj-cell">
            <label>计划日期：</label>
            <span>{{plan.planstart}}</span>
          </div>
          <div class="rj-cell">
            <label>状态：</label>
            <span>{{plan.statusname}}</span>
          </div>
        </div>
      </div>
      <div class="weui-panel__hd" v-if="plsCollect.length > 0">领料信息</div>
      <div class="weui-panel__bd" v-for="(item, index) in plsCollect">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell">
            <label>领料单数量：</label>
            <span>{{item.num}}</span>
          </div>
<!--          <div class="rj-cell">-->
<!--            <label>合计重量：</label>-->
<!--            <span>{{item.weightall}} 吨</span>-->
<!--          </div>-->
        </div>
      </div>
      <div class="weui-panel__hd" v-if="pls.length > 0">领料详情</div>
      <div class="weui-panel__bd" v-for="(item, index) in pls">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell">
            <label>编号：</label>
            <span>{{item.code}}</span>
          </div>
<!--          <div class="rj-cell">-->
<!--            <label>库房：</label>-->
<!--            <span>{{item.strname}}</span>-->
<!--          </div>-->
          <div class="rj-cell">
            <label>状态：</label>
            <span>{{item.statusname}}</span>
          </div>
          <div  v-for="(product, index) in item.items" :key="product.guid">
            <div class="rj-cell">
              <label><span style="font-size: 14px;padding: 0;">产品：</span></label>
              <span>{{product.sthname}}</span>
              <span>{{product.product}} {{product.spename}} </span>
              <span>{{product.weight}}{{product.stockunit}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="weui-panel__hd" ref="qaformTitle" v-show="hgsum > 0">入库信息</div>
      <div class="weui-panel__bd" v-show="hgsum > 0">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div style="border-top: 1px solid #eee;">
            <div  >
              <div class="rj-cell">
                <label><span style="font-size: 14px;padding: 0;">入库单数量：</span></label>
                <span>{{hgsum}} 个</span>
<!--                <span>{{hgweight}} 吨</span>-->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="weui-panel__hd" v-show="whinforms.length > 0">入库详情</div>
      <div class="weui-panel__bd" v-for="(item, index) in whinforms">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell tit">
            <label>编号：</label>
            <span>{{item.code}}</span>
          </div>
          <div class="rj-cell tit">
            <label>状态：</label>
            <span>{{whinformStatus(item.status)}}</span>
          </div>
          <div class="rj-cell tit">
            <label>领料单编号：</label>
            <span>{{item.pickinglistCode}}</span>
          </div>
          <div class="rj-cell tit">
            <label>入库库房：</label>
            <span>{{item.strname}}</span>
          </div>
          <div  v-for="(product, index) in item.items" :key="product.guid">
            <div class="rj-cell">
              <label><span style="font-size: 14px;padding: 0;">产品：</span></label>
              <span>{{product.housename}}</span>
              <span>{{product.product}} {{product.spename}}</span>
              <span>{{product.weight}}{{product.stockunit}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="weui-panel__hd" v-if="scrapsum > 0">报废信息</div>
      <div class="weui-panel__bd" v-if="scrapsum > 0">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell">
            <label>报废单数量：</label>
            <span>{{scrapsum}}</span>
          </div>
        </div>
      </div>
      <div class="weui-panel__hd" v-if="scraps.length > 0">报废详情</div>
      <div class="weui-panel__bd" v-for="(item, index) in scraps">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell">
            <label>编号：</label>
            <span>{{item.code}}</span>
          </div>
          <div class="rj-cell">
            <label>状态：</label>
            <span>{{statusname(item.status)}}</span>
          </div>
          <div  v-for="(product, index) in item.items" :key="product.guid">
            <div class="rj-cell">
              <label><span style="font-size: 14px;padding: 0;">产品：</span></label>
              <span>{{product.housename}}</span>
              <span>{{product.product}}</span>
              <span>{{product.weight}} {{product.stockunit}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="weui-panel__hd" v-if="materialsum > 0">退料信息</div>
      <div class="weui-panel__bd" v-if="materialsum > 0">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell">
            <label>退料单数量：</label>
            <span>{{materialsum}}</span>
          </div>
          <div class="rj-cell">
            <label>合计重量：</label>
            <span>{{materialweight ? `${materialweight} 吨` : ''}}</span>
          </div>
        </div>
      </div>
      <div class="weui-panel__hd" v-if="materials.length > 0">退料详情</div>
      <div class="weui-panel__bd" v-for="(item, index) in materials">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell">
            <label>编号：</label>
            <span>{{item.code}}</span>
          </div>
          <div class="rj-cell">
            <label>库房：</label>
            <span>{{item.srName}}</span>
          </div>
          <div class="rj-cell">
            <label>状态：</label>
            <span>{{item.statusName}}</span>
          </div>
          <div  v-for="(product, index) in item.items" :key="product.guid">
            <div class="rj-cell">
              <label><span style="font-size: 14px;padding: 0;">产品：</span></label>
              <span>{{product.shname}}</span>
              <span>{{product.productName}}</span>
              <span>{{product.weight}} {{product.stockunit}}</span>

            </div>
          </div>
        </div>
      </div>
      <OperationLogs2 :orderid="id" :srguid="plan.strmid" :departid="''"></OperationLogs2>
    </div>
  </div>
</template>

<script>
  import OperationLogs2 from '../../common/OperationLogs2'

  export default {
    name: 'ViewPlan',
    data () {
      return {
        openid: localStorage.openid,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
        userid: localStorage.userid,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
        id: '',
        plan: {},
        plsCollect: [],
        pls: [],
        hgweight: 0,
        hgsum: 0,
        bhgweight: 0,
        bhgsum:0,
        whinforms: [],
        scrapsum: 0,
        scrapweight:'',
        scraps: [],
        materialsum: '',
        materialweight: '',
        materials: []
      }
    },
    components: {
      OperationLogs2
    },
    created() {
      //为页面添加一个监听器
      window.addEventListener('setItem', ()=> {
        this.openid = localStorage.getItem('openid');
        this.userid = localStorage.getItem('userid');
      })
    },
    mounted () {

      this.id = this.$route.query.id;
      this.getPlan(this.id);

      //图片浏览器
      $('.weui-panel').on('click', '.uploaderFiles .attachimg', function () {
        var num = $(this).parent().children().not( ".exp" ).length;
        var imgArr = [];
        for (var i=0; i<num; i++) {
          imgArr.push($(this).parent().find('.attachimg').eq(i).data('img'));
        }
        var pnum = $(this).parent().find('.exp').length;
        var index = pnum > 0 ? $(this).index() - pnum : $(this).index();
        var pb = $.photoBrowser({
          items: imgArr,
          initIndex: index
        });
        pb.open();
      });

    },
    methods: {
      statusname: function(status) {
        let name = '';
        switch (status) {
          case 1:
            name = '待质检';
            break;
          case 2:
            name = '内部审批';
            break;
          case 3:
            name = '品控审批';
            break;
          case 4:
            name = '待出库';
            break;
          case 5:
            name = '已出库';
            break;
        }
        return name;
      },
      whinformStatus: function(status) {
        let name = '';
        switch (status) {
          case 1:
            name = '待质检';
            break;
          case 2:
            name = '待入库';
            break;
          case 3:
            name = '已入库';
            break;
        }
        return name;
      },
      getPlan: function (id) {
        this.axios({
          method: 'get',
          url: '/produce/Produceplan!detail.action',
          params: {guid: id}
        }).then(response => {
          if (response.data.status == 'true') {
            let data = response.data;
            this.plan = data.pp;
            this.plsCollect = data.plsCollect != undefined ? data.plsCollect : [];
            this.pls = data.pls != undefined ? data.pls : [];
            this.scrapsum = data.scrapsum;
            this.scrapweight = data.scrapweight;
            this.scraps = data.scraps != undefined ? data.scraps : [];
            this.materialsum = data.materialsum;
            this.materialweight = data.materialweight;
            this.materials = data.materials != undefined ? data.materials : [];
            if (data.whinforms != undefined) {
              this.whinforms = data.whinforms != undefined ? data.whinforms : [];
              this.hgweight = data.hgweight;
              this.hgsum = data.hgsum;
            }
          } else if (response.data.status == 'false') {
            this.toastText(response.data.result);
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastError('系统错误');
          }
        });
      },
    }
  }
</script>
